<div class="viewer">
  <a class="buttonClose" ui-sref="animate" ng-click="handleButtonCloseClick()"></a>
  <div class="viewerWrapper">
    <div class="iconWrapper iconViewer">
      <div ng-class="animateViewerIconA.classNames" class="icon">
        <i ng-if="animateViewerIconA.htmlChildMarkup || animateViewerIconB.htmlChildMarkup"></i>
      </div>
    </div>
    <div class="iconWrapperBig iconViewer">
      <div class="scale">
        <div ng-class="animateViewerIconA.classNames" class="icon">
          <i ng-if="animateViewerIconA.htmlChildMarkup || animateViewerIconB.htmlChildMarkup"></i>
        </div>
      </div>
    </div>
    <div class="animateControl">
      <div class="iconLabel clear">
        <div class="iconALabel">
          {{animateViewerIconA.name}}
        </div>
        <div class="iconBLabel">
          {{animateViewerIconB.name}}
        </div>
      </div>
      <div class="iconWrappers clear">
        <div class="iconWrapper iconAWrapper" ng-class="{locked: animateIconALock}">
          <div class="buttonLock" ng-click="iconLockClick('A')"
            ng-class="{locked: animateIconALock, unlocked: !animateIconALock}"
            ><i></i></div>
          <div class="iconMarker A"></div>
          <div ng-class="animateViewerIconA.classNames" class="icon">
            <i ng-if="animateViewerIconA.htmlChildMarkup"></i>
          </div>
        </div>
        <div class="iconWrapper iconBWrapper" ng-class="{locked: animateIconBLock}">
          <div class="buttonLock" ng-click="iconLockClick('B')"
            ng-class="{locked: animateIconBLock, unlocked: !animateIconBLock}"
            ><i></i></div>
          <div class="iconMarker B"></div>
          <div ng-class="animateViewerIconB.classNames" class="icon">
            <i ng-if="animateViewerIconB.htmlChildMarkup"></i>
          </div>
        </div>
        <div class="animateDirection AtoB">
          <div class="buttonPlay" ng-click="buttonPlayClick()"><i></i></div>
        </div>
      </div>
    </div>
    <form action="https://codepen.io/pen/define" method="POST" target="_blank">
      <input type="hidden" name="data" ng-value='animateJSONstring'>
      <button class="buttonCodepen" type="submit" >
        CONTINUE ON 
        <span ng-include="'partials/codepen-logo.html'"></span>
      </button>
    </form>
    <div class="codeBlocks">
      <h4>HTML
        <div class="html buttonCopy"
        ng-mouseleave="handleButtonCopyMouseLeave()">
          <div class="icon copy"></div>
        </div>
      <xmp>{{animateGenerateHTML(animateViewerIconA, animateViewerIconB)}}</xmp>
      <h4>CSS
        <div class="css buttonCopy" 
        ng-mouseleave="handleButtonCopyMouseLeave()">
          <div class="icon copy"></div>
        </div>
      </h4>
      <xmp>{{animateGenerateCSS()}}</xmp>
      <h4>JS
        <div class="js buttonCopy" 
        ng-mouseleave="handleButtonCopyMouseLeave()">
          <div class="icon copy"></div>
        </div>
      </h4>
      <xmp>{{animateGenerateJS(animateViewerIconA,animateViewerIconB)}}</xmp>
      
    </div>
  </div>
</div>
